<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>任务待确认</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-pull-bottom-tips {
        text-align: center;
      }
      
      .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        z-index: 1;
      }
      
      .mui-bar~.mui-pull-top-tips {
        top: 24px;
      }
      
      .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
      }
      
      .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
      }
      
      .mui-pull-top-tips .mui-pull-loading {
        /*-webkit-backface-visibility: hidden;
      				-webkit-transition-duration: 400ms;
      				transition-duration: 400ms;*/
        margin: 0;
      }
      
      .mui-pull-top-wrapper .mui-icon,
      .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
      }
      
      .mui-pull-top-wrapper .mui-icon.mui-reverse {
        /*-webkit-transform: rotate(180deg) translateZ(0);*/
      }
      
      .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: #777;
      }
      
      .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
      }
      
      .mui-pull-top-canvas canvas {
        width: 40px;
      }
      
     /* .mui-slider-indicator.mui-segmented-control {
        background-color: #fff;
      } */
      
      /* .silder-wrap {
        height: 60px;
      }
      
      .mui-fullscreen .mui-segmented-control~.mui-slider-group {
        top: 60px;
      }
      
     .mui-segmented-control .mui-control-item {
        line-height: 60px;
      } */
      
      /* .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        color: #3188FE;
        position: relative;
      } */
      
      /* .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after {
        content: '';
        display: block;
        width: 24px;
        height: 3px;
        background: #3188FE;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      } */
      
      .mui-card {
        border-radius: 5px;
        box-shadow: none;
        padding:0 20px;
      }
      .mui-card-header{
        /* padding: 0 0 20px 0; */
        position: relative;
        font-size: 16px;
      }
      .lists {
        padding: 20px 0 0 0;
      }
      
      .lists li {
        margin-bottom: 15px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding-right: 20px;
      }
      
      .lists li .left_name {
        color: #9098AB;
        white-space: nowrap;
      }
      
      .lists li .right_name {
        color: #9098AB;
        float: right;
      }
      
      .btntxt {
        width: 100%;
        text-align: right;
        font-size: 14px;
        padding-right: 20px;
        color: #3188FE;
      }
      
      /* .mui-navigate-right:after,
      .mui-push-right:after {
        right: 15px;
        color: #3188FE;
      } */
      .indexs{
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #3188FE;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        margin-right: 5px;
      }
      .txt_l{
        display: inline-block;
      }
      .tags{
         display: inline-block;
         width: 80px;
         height: 40px;
         background: url(../img/task/yinzhang_tinggongdaijiandian.png) no-repeat;
         background-size: 100%;
         vertical-align: middle;
      }
      .marks{
        display: inline-block;
        width: 70px;
        height: 26px;
        line-height: 26px;
        /* background-color: #10B7AF; */
        border-radius: 2px;
        color: #fff;
        text-align: center;
        transform: skewX(-15deg);
      }
      .m_r{
        padding-right:25px;
        
      }
      .mui-navigate-right:after{
        color: #B4C0CF;
        font-size: 20px;
        right: 0;
      }
      .sx_s{
        color:#fff;
      }
      .sx_s span{
        font-size: 17px;
      }
      .b_g{
        background-color: #10B7AF;
      }
      .b_g1{
        background-color: #3188FE;
      }
      .b_g2{
        background-color: #B4C0CF;
      }
      .screens{
        position: absolute;
        top:44px;
        left: 0;
        width: 100%;
        min-height: 200px;
        background-color: #fff;
        z-index: 999;
      }
      .content_ul{
        padding: 30px;
        overflow: hidden; 
      }
      .content_ul .rowli ul{
        padding: 0;
        margin: 0;
        list-style: none;
        border-bottom: solid 1px #DCDCDC;
        overflow: hidden;
        display: flex;
        flex-wrap:wrap;
        /* justify-content: space-between; */
      }
      .rowli ul li{
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #F5F6F7;
        border: solid 1px #C2CFDA;
        border-radius: 3px;
        color: #000;
        /* float: left; */
        margin-right: 20px; 
        margin-bottom: 20px;
        box-sizing:border-box;
        /* flex-grow: 1; */
      }
     .rowli ul li.ls{
        background-color: #3188FE;
        color: #fff;
      }
      .btnli{
        text-align: center;
        padding-top: 30px;
        display: flex;
        justify-content: space-between;
      }
      .btnli .btns{
        background-color: #E7ECF1;
      }
      .btnli button{
        width: 45%;
      }
      .head_s{
        padding: 0 20px;
        border-bottom: solid 1px #DCDCDC !important;
        /* height: 20px; */
      }
    </style>
  </head>

  <body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">任务待确认</h1>
       <!-- <a class="mui-icon mui-icon-right-nav mui-pull-right mui-icon mui-icon-gear sx_s" @click="getSearch"><span>筛选</span></a> -->
      </header>
      <div class="mui-content app-container">
        <div id="slider" class="mui-slider mui-fullscreen">
          <div class="tab-content mui-slider-group" id="tab-content">
            <div id="item1" class="mui-slider-item mui-control-content mui-active">
              <!--<div id="item1-scroll">-->
                <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                  <div class="mui-scroll">
                    <div>
                      <div class="mui-card card_content" v-for="(item,index) in projectList" :key="item.id" v-cloak>
                        <div class="mui-card-content">
                          <ul class="mui-table-view lists">
                            <li class="lis">
                                 <span class="mui-navigate-right">{{item.tn}}</span>
                                 <a @tap="sctzd(item.id)">生成通知单</a>
                            </li>
                            <li class="lis">
                              <span class="left_name">开始时间：{{formatDate(item.st)}}</span>
                              <span class="right_name">结束时间：{{formatDate(item.et)}}</span>
                            </li>
                          </ul>
                        </div>
                        
                      </div>
                      
                    </div>
                  </div>
                <!--</div>-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

     <script src="../../../js/mui.js"></script>
         <script src="../../../js/mui.pullToRefresh.js"></script>
         <script src="../../../js/mui.pullToRefresh.material.js"></script>
         <script src="../../../js/jquery-1.7.2.min.js"></script>
         <script src="../../../js/vue.js"></script>
         <script src="../js/mkeyplus.base.js"></script>
         <script type="text/javascript">
           mui.init()
           var size = 15;
           var page = 1;
           var donePage = 1;
           var ids=3;
           mui.plusReady(function() {
             getProject(page)
             // getTaskList(donePage)
           })
           var vm = new Vue({
             el: '#container',
             data: {
               projectList: [],
               taskList: [],
               aList:[],
               yList:[],
               wList:[],
             },
             created: function() {
             getProject(page)
     //        getTaskList(donePage)
             },
             methods: {
               formatDate(tmp, fmt) {
                 return mui.baseApp.formatDate(tmp,fmt)
               },
               sctzd(ids){
                 mui.baseApp.httpRequst("post", "/app/api/notice/create/task/"+ids, {}, function(data) {
                   console.log('任务待确定数据列表',data)
                   // plus.nativeUI.closeWaiting();
                   
                    
                 }, function() {
                   // plus.nativeUI.closeWaiting()
                   console.log("获取数据失败");
                 })
               },
               status(item,v){
                 if(v==1){
                   if(item==0){
                     return '未开始'
                   }else if(item==1){
                     return '进行中'
                   }else if(item==2){
                     return '已完成'
                   }
                 }else{
                   if(item==0){
                     return 'b_g0'
                   }else if(item==1){
                     return 'b_g1'
                   }else if(item==2){
                     return 'b_g2'
                   }
                 }
                  
               },
               toDetail(item) {
     //          projectCategory  项目分类，0:常规项目 1:单任务项目
                 mui.baseApp.openWindow('./workingCode.html',{projectTaskId: item.id, projectCategory:1})
               },
               getSearch(){
                 mui('.screens').popover('toggle');
                 // this.searchs=!this.searchs
               },
               toTask(item) {
                 mui.baseApp.openWindow('./project_task_list.html', {projectId: item.id})
               },
                
             }
           });
     
           (function($) {
             //阻尼系数
             var deceleration = mui.os.ios ? 0.003 : 0.0009;
             $('.mui-scroll-wrapper').scroll({
               bounce: false,
               indicators: true, //是否显示滚动条
               deceleration: deceleration
             });
             $.ready(function() {
               $('.mui-scroll').pullToRefresh({
                 down: {
                   callback: function() {
                     var self = this;
                     setTimeout(function() {
                         page = 1
                         getProject(page);
                       self.endPullDownToRefresh();
                     }, 1000);
                     // setTimeout(function() {
                     //   if(index === 0) {
                     //     page = 1
                     //     getProject(page);
                     //   } else {
                     //     donePage = 1;
                     //     getTaskList(donePage);
                     //   }
                     //   self.endPullDownToRefresh();
                     // }, 1000);
               
                   }
                 },
                 up: {
                   callback: function() {
                     var self = this;
                     setTimeout(function() {
                       mui.toast("11111")
                       console.log(index)
                         page++;
                         getProject(page);
                       self.endPullUpToRefresh();
                     }, 1000);
                     // setTimeout(function() {
                     //   mui.toast("11111")
                     //   console.log(index)
                     //   if(index === 0) {
                     //     page++;
                     //     getProject(page);
                     //   } else {
                     //     donePage++;
                     //     getTaskList(donePage);
                     //   }
                     //   self.endPullUpToRefresh();
                     // }, 1000);
                   }
                 }
               });
               //循环初始化所有下拉刷新，上拉加载。
               // $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
               //   $(pullRefreshEl).pullToRefresh({
               //     down: {
               //       callback: function() {
               //         var self = this;
               //         setTimeout(function() {
               //           if(index === 0) {
               //             page = 1
               //             getProject(page);
               //           } else {
               //             donePage = 1;
               //             getTaskList(donePage);
               //           }
               //           self.endPullDownToRefresh();
               //         }, 1000);
     
               //       }
               //     },
               //     up: {
               //       callback: function() {
               //         var self = this;
               //         setTimeout(function() {
               //           mui.toast("11111")
               //           console.log(index)
               //           if(index === 0) {
               //             page++;
               //             getProject(page);
               //           } else {
               //             donePage++;
               //             getTaskList(donePage);
               //           }
               //           self.endPullUpToRefresh();
               //         }, 1000);
               //       }
               //     }
               //   });
               // });
               mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
               // mui("#item2 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
             });
           })(mui);
     
           function getProject(page) {
             if(page === 1) {
               // plus.nativeUI.showWaiting('加载中...');
             }
             mui.baseApp.httpRequst("get", "/app/api/notice/task/todo", {
               page: page,
               size: size
             }, function(data) {
               console.log('任务待确定数据列表',data)
               // plus.nativeUI.closeWaiting();
               if(page == 1) {
                 vm.projectList = []
               }
               vm.projectList = vm.projectList.concat(data.records)
               vm.aList=[...vm.projectList]
               // data.data.forEach((res)=>{
               //   console.log('idds',res)
               //   if(res.status==2){
               //     console.log('idds12',res)
               //     vm.yList=res;
               //   }else if(res.status==0||res.status==1){
               //     vm.wList=res;
               //   }
               // })
               if(data.records.length < size) { //
                 mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true); //参数为true代表没有更多数据了。
                 return;
               } else {
                 mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(false); //参数为true代表没有更多数据了。
                 mui("#item1 .mui-scroll").pullToRefresh().refresh(true); //启用上拉加载
               }
             }, function() {
               // plus.nativeUI.closeWaiting()
               console.log("获取数据失败");
             })
           }
     
            
           document.getElementById('slider').addEventListener('slide', function(e) {
             console.log(e.detail.slideNumber);
     
           });
         </script>
  </body>

</html>